<template>
	<view class="transform">
		<view class="business">
			<view class="inputlist">
				<view class="left">
					<text>验证码</text>
				</view>
				<view class="right" style="display: flex;justify-content: space-between;">
					<input type="text" placeholder="请输入验证码" maxlength="6" v-model="sms_code"
						placeholder-class="inputColor">
					<text @click="sendCode">{{getCodeText}}</text>
				</view>
			</view>
			<view class="btn">
				<button class="btn_sumbit" @click="payconfirm" :loading="loading" :disabled="loading">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		FastConfirm,
		FastSms,
		FastError
	} from "@/api/fast.js"
	export default {
		data() {
			return {
				loading: false,
				sms_code: '',
				payment_id: '', //ada支付id
				getCodeText: '60s',
				Timer: '',
				getCodeWaiting: true,
				timer: '',
				timer_count: 0
			}
		},
		onLoad(e) {
			if (e.payment_id) {
				this.payment_id = e.payment_id
			}
			this.getCode()
		},
		methods: {
			getCode() {
				let holdTime = 60;
				this.getCodeText = "(60s)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeWaiting = false;
						// this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "重新获取"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "(" + holdTime + "s)"
					holdTime--;
				}, 1000)
			},
			sendCode() {
				if (this.getCodeWaiting) {
					return false
				}
				this.getCodeWaiting = true
				this.getCode()
				//快捷重发
				FastSms({
					payment_id: this.payment_id
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
				})

			},
			payconfirm() {
				if (this.sms_code == '') {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					})
					return false
				}
				FastConfirm({
					payment_id: this.payment_id,
					sms_code: this.sms_code
				}).then(res => {

					if (res.status == 1) {
						//确认成功 开启轮询
						this.timer = setInterval(() => {
							if (this.timer_count >= 2) {
								clearInterval(this.timer)
								uni.showToast({
									title: '网络超时,请稍后再试',
									icon: 'none'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/tabBar/user/user'
									})
								}, 500)
							} else {
								this.FastError()
								this.timer_count++
							}
						}, 1000)
						// setTimeout(() => {
						// 	uni.switchTab({
						// 		url: '/pages/tabBar/user/user'
						// 	})
						// }, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.loading = false

					}
				})
			},
			FastError() {
				FastError({
					payment_id: this.payment_id
				}).then(res => {
					if (res.data != '') {
						clearInterval(this.timer)
						if (res.data.type == 'failed') {
							uni.showToast({
								title: res.data.error_msg,
								icon: 'none'
							})
							this.loading = false
						} else if (res.data.type == 'succeeded') {
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/tabBar/user/user'
								})
							}, 500)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
		position: relative;
	}

	.passwordbox {
		position: fixed;
		width: 100%;
		left: 0;
		height: 100vh;
		background: #0000003b;
		top: 0;
		z-index: 9;

		.passwordmain {
			position: fixed;
			z-index: 999;
			background: #fff;
			width: 94%;
			left: 3%;
			padding: 40px 10px;
			box-sizing: border-box;
			border-radius: 8px;
			top: 25%;

			.password_title {
				font-size: 14px;
				font-weight: bold;
				border-bottom: 1px solid #ccc;
				padding-bottom: 8px;
			}

			input {
				margin-top: 10px;
				font-size: 14px;
				padding: 10px;
			}

			.btns {
				display: flex;
				justify-content: space-around;
				margin-top: 15px;

				.cancel {
					width: 40%;
					text-align: center;
					height: 40px;
					line-height: 40px;
					color: skyblue;
					border: 1px solid skyblue;
					border-radius: 8px;
				}

				.sure {
					width: 40%;
					text-align: center;
					height: 40px;
					line-height: 40px;
					border: 1px solid skyblue;
					background-color: skyblue;
					border-radius: 8px;
					color: #fff;
				}
			}
		}


	}

	.tips {
		font-size: 14px;
		margin-top: 10px;
		padding: 0 20px;
		color: #777;
	}

	.title {
		text-align: right;
		padding: 10px;
		color: #EB655D;
		font-size: 14px;
	}

	.typebox {
		background-color: #fff;
		padding: 10px;

		.type_item {
			display: flex;
			align-items: center;
			padding: 5px 0;
			font-size: 14px;

			text {
				margin-right: 20px;
			}

			radio-group {
				display: flex;
			}

			label {
				display: flex;
				align-items: center;
			}
		}
	}

	.btn {
		margin-top: 15px;

		.btn_sumbit {
			background: #EB655D;
			color: #fff;
			width: 80%;
			font-size: 14px;
			box-sizing: border-box;
		}
	}

	.business {
		margin-top: 10px;
	}

	.inputlist {
		background-color: #fff;
		display: flex;
		font-size: 14px;
		padding: 15px 10px;
		border-bottom: 1px solid #eee;

		.left {
			width: 25%;
			display: flex;

			.hx {
				display: block;
				width: 5px;
				color: red;
				margin-right: 3px;
			}
		}

		.right {
			width: 70%;

			input {
				font-size: 14px;
			}

			.picker_text {
				color: #ccc;
			}

			.inputColor {
				color: #ccc;
			}


		}
	}
</style>
